<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS attr()自定义能力测试</title>
<style>
pre {
    background-color: #f0f0f0;
    font-size: 14px;
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: .5rem;
}
</style>
<style>
button {
    --attr-bg: attr(bgcolor color, deeppink);
    --attr-color: attr(color color, white);
    height: 60px;
    background-color: var(--attr-bg, #eee);
    color: var(--attr-color);
    font-size: 125%;
    border: 0;
}
.button {
    --attr: attr(size em);
    width: var(--attr);
}

[ml] {
    --ml: attr(ml px);
    margin-left: var(--ml);
}
[mt] {
    --mt: attr(mt px);
    margin-top: var(--mt);
}
[fz] {
    --fz: attr(fz px);
    font-size: var(--fz);
}
[lh] {
    --lh: attr(lh px);
    line-height: var(--lh);
}

img-pencil {
    display: block;
    width: 256px; height: 256px;
    position: relative;
    --pencil-img: attr(url url);
    z-index: 0;
    overflow: hidden;
}
img-pencil::before {
    content: '';
    display: block;
    height: inherit;
    background: var(--pencil-img) -1px -1px, var(--pencil-img);
    background-size: calc(100% + 1px);
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
img-pencil::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: var(--pencil-img);
    background-size: 100%;
    mix-blend-mode: color;
}

</style>
<script src="./css-attr.js"></script>
</head>
<body>

<h3>全局CSS</h3>

<pre>button {
    --attr-bg: attr(bgcolor color, deeppink);
    --attr-color: attr(color color, white);
    height: 60px;
    background-color: var(--attr-bg, #eee);
    color: var(--attr-color);
    font-size: 125%;
    border: 0;
}
[ml] {
    --ml: attr(ml px);
    margin-left: var(--ml);
}
[mt] {
    --mt: attr(mt px);
    margin-top: var(--mt);
}
[fz] {
    --fz: attr(fz px);
    font-size: var(--fz);
}
[lh] {
    --lh: attr(lh px);
    line-height: var(--lh);
}</pre>

<h3>具体元素和代码</h3>

<ul>
    <li>
        <button id="button1" bgcolor="deepskyblue" color="white">按钮-点击属性变化变色</button>

<pre>&lt;button id="button1" bgcolor="deepskyblue" color="white"&gt;按钮-点击属性变化变色&lt;/button&gt;</pre>
    </li>
    <li>
        <button color="white">按钮-无bgcolor属性-使用候补颜色</button>

<pre>&lt;button color="white"&gt;按钮-无bgcolor属性-使用候补颜色&lt;/button&gt;</pre>
    </li>
    <li>
        <button id="button3" class="button" size="20">按钮-直接--attr:attr()</button>

<pre>&lt;button id="button3" class="button" size="20"&gt;按钮-直接--attr:attr()&lt;/button&gt;</pre>
    </li>
    <li>
        <button ml="20" mt="1em" fz="14" lh="24px">文字</button>
        <pre>&lt;button ml="20" mt="1em" fz="14" lh="24px"&gt;文字&lt;/button&gt;</pre>
    </li>
</ul>

<h3>可以纯CSS实现组件</h3>

<img-pencil url="./example.jpg"></img-pencil>

<h4>代码：</h4>
<pre>&lt;img-pencil url="./example.jpg"&gt;&lt;/img-pencil&gt;</pre>
<pre>img-pencil {
    display: block;
    width: 256px; height: 256px;
    position: relative;
    --pencil-img: attr(url url);
    z-index: 0;
    overflow: hidden;
}
img-pencil::before {
    content: '';
    display: block;
    height: inherit;
    background: var(--pencil-img) -1px -1px, var(--pencil-img);
    background-size: calc(100% + 1px);
    background-blend-mode: difference;
    filter: brightness(2) invert(1) grayscale(1);
}
img-pencil::after {
    content: '';
    position: absolute; left: 0; top: 0;
    height: inherit; width: inherit;
    background: var(--pencil-img);
    background-size: 100%;
    mix-blend-mode: color;
}</pre>

<script>
button1.onclick = function () {
    this.setAttribute('color', 'red');
};
button3.onclick = function () {
    this.setAttribute('size', '15');
};
</script>
</body>
</html>